<template>
	<!-- 团购详情 -->
	<view>
		<view class="select">
			<!-- 轮播图开始 -->
			<view><u-swiper :list="imagesList" border-radius="0" bg-color="#ffffff" height="386"></u-swiper></view>
			<!-- 轮播图结束 -->
			<!-- 服务内容 -->
			<view style="width: 100%;margin-top: 12rpx;">			
				<!-- 介绍 -->
				<view style="width: 100%;">
					<view style="padding-left: 4%;margin: 14rpx 0;position: relative;">
						<view style="font-size: 34rpx;color: #323332;font-weight: 400; line-height: 50rpx;padding: 10rpx 0;">{{details.name}}</view>
						<view class="boxs" style="position: absolute;right: 0rpx;bottom: 0rpx;">
							<view style="position: relative; border-radius: 30rpx 0px 0px 30rpx; width: 114rpx;height: 48rpx;line-height: 48rpx;display: flex;justify-content: center;align-items: center;background-color: #E9E9E9;">
								<view>
									<image style="width: 28rpx;height: 28rpx;display: flex;justify-content: center;align-items: center;" src="https://beedao.oss-cn-beijing.aliyuncs.com/69bf2f32c1494fd6a9809e4cfea9fb39.png"></image>
								</view>
								<view style="color: #8E8E8E;font-size: 20rpx;margin-left: 6rpx;">分享</view>
								<button open-type="share" class="getCodeView"></button>
							</view>
						</view>
					</view>
					<view style="width: 100%;border-top: 8rpx solid #FBFBFB;border-bottom: 8rpx solid #FBFBFB;">
						<view style="width: 92%;margin: 0 auto;display: flex;justify-content: space-between;">
							<!-- 服务保障 -->
							<view style="line-height: 80rpx;font-size: 26rpx;color: #6F6F6F;display: flex;" >
								<view style="display: flex;margin-right: 10rpx;width: 160rpx;" v-for="(item, index1) in advantage" :key="index1">
									<view style="width: 24rpx;line-height: 24rpx;height: 24rpx;text-align: center;background-color: #6DC442;border-radius: 20rpx;margin-top: 28rpx;">
										<u-icon name="checkbox-mark" size="20" color="#fff"></u-icon>
									</view>
									<view style="margin-left: 8rpx;">{{ item }}</view>
								</view>
							</view>
							<!-- 服务保障结束 -->
							<view style="line-height: 80rpx;color: #999999;font-size: 26rpx;border-bottom: 1rpx solid #F9FAFB;">
								<view style="width: 100%;">
									已售
									<text style="color: #333333;">{{details.totalSale?details.totalSale:0}}</text>
								</view>
							</view>
						</view>
					</view>
					
				</view>
				<u-sticky offset-top="0">
					<view style="width: 100%;background-color: #fff;padding-top: 14rpx;padding-bottom: 14rpx;">
						<view style="width: 100%;margin: 0 auto;line-height: 40rpx;">
							<u-row gutter="0" justify="center">
								<u-col span="4">
									<view @click="goSliding(formHeight.server, 1)" :class="selectBom == 1 ? 'addbold' : ''" style="text-align: center;line-height: 50rpx;">
										服务详情
									</view>
									<view v-if="selectBom == 1" style="width: 60rpx;height: 8rpx;background-color: #FFEDA7;margin: 0 auto;margin-bottom: ;"></view>
								</u-col>
								<u-col span="4">
									<view @click="goSliding(formHeight.instruction, 2)" :class="selectBom == 2 ? 'addbold' : ''" style="text-align: center;line-height: 50rpx;">
										注意事项
									</view>
									<view v-if="selectBom == 2" style="width: 60rpx;height: 8rpx;background-color: #FFEDA7;margin: 0 auto;margin-bottom: ;"></view>
								</u-col>
								<u-col span="4">
									<view @click="goSliding(formHeight.evaluation, 3)" :class="selectBom == 3 ? 'addbold' : ''" style="text-align: center;line-height: 50rpx;">
										服务流程
									</view>
									<view v-if="selectBom == 3" style="width: 60rpx;height: 8rpx;background-color: #FFEDA7;margin: 0 auto;margin-bottom: ;"></view>
								</u-col>
							</u-row>
						</view>
					</view>
				</u-sticky>
				<view style="width: 100%;" id="comment1">
					<view  class="pircture" v-html="description" >
					</view>
					<!-- <view class="look" @click="showTag">
						<view style="text-align: center;">
							{{ flag ? "收起详情" : "查看更多详情" }}
							<u-icon name="arrow-down" style='margin-top: -18rpx;margin-left: 7rpx;'  color="#9393AA" v-if="!flag" size="30"></u-icon>
							
							<u-icon name="arrow-up" style='margin-top: -18rpx;margin-left: 7rpx;'  color="#9393AA" v-if="flag" size="30"></u-icon>
						</view>
					</view> -->
				</view>
				<view style="width:100%;" id="comment2">
					<view class="wrap">
						<view class="names" style="position: relative;">
							注意事项
							<view style="width: 100%;text-align: center;position: absolute;bottom: -24rpx;left: 0;">
								<image  style=" width: 130rpx;height: 10rpx;" src="https://beedao.oss-cn-beijing.aliyuncs.com/9030b4344baf44cb83110d69c998ee6c.png" mode=""></image>
							</view>
						</view>
						<view class="shopname" style="margin-bottom: 34rpx;">
							<view style="display: flex;">
								<view class="one">
									清洁工具
								</view>
								<view class="two">
									{{details.toolType == 1 ? '家政人员携带' : '顾客自备'}}
								</view>
							</view>
							<view class="success">
								<view class="one">
									适用范围
								</view>
								<view class="two">
									{{details.applyScope}}
								</view>
							</view>
							<view  class="success">
								<view class="one">
									商家说明
								</view>
								<view class="two">
									{{details.entInstruction}}
								</view>
							</view>
							<view  class="success">
								<view class="one">
									预约信息
								</view>
								<view class="two">
									{{details.reserveInstruction}}
								</view>
							</view>
							<view  class="success">
								<view class="one">
									使用有效期
								</view>
								<view class="two">
									{{details.startTime}} - {{details.endTime}}
								</view>
							</view>
							<view  class="success">
								<view class="one">
									不可用日期
								</view>
								<view class="two">
									{{details.timeInstruction}}
								</view>
							</view>
						</view>
					</view>
					<view class="wrap" style="padding: 16rpx 40rpx;border-top: 8rpx solid #FBFBFB;border-bottom: 8rpx solid #FBFBFB;">
						<view class="names" style="position: relative;margin:18rpx 0  34rpx 0;">
							必读事项
							<view style="width: 100%;text-align: center;position: absolute;bottom: -24rpx;left: 0;">
								<image  style=" width: 130rpx;height: 10rpx;" src="https://beedao.oss-cn-beijing.aliyuncs.com/9030b4344baf44cb83110d69c998ee6c.png" mode=""></image>
							</view>
						</view>
						<view  class="shopname">
							工作人员上门会主动出示工作证件，如需发票需要联系商家咨询，为保障您的权益，请确认工作人员身份再开门接受服务
						</view>
					</view>
				</view>
				<!-- 用户评价 -->
				<view class="introduce" id="comment3" style="padding-right: 0;padding-bottom: 0;">
					<view class="names" style="position: relative;margin:34rpx 0  34rpx 0;">
						服务流程
						<view style="width: 100%;text-align: center;position: absolute;bottom: -24rpx;left: 0;">
							<image  style=" width: 130rpx;height: 10rpx;" src="https://beedao.oss-cn-beijing.aliyuncs.com/9030b4344baf44cb83110d69c998ee6c.png" mode=""></image>
						</view>
					</view>
					<view style="width: 100%;border-bottom: 8rpx solid #FBFBFB;" >
						<view style="color: #9393AA;line-height: 60rpx;width: 100%;text-align: center;">及时下单·及时响应</view>
						<view style="width:92%;margin: 0 auto;">
							<image style="width:100%;" src="https://beedao.oss-cn-beijing.aliyuncs.com/6772a20393c64c058f28852680ed04ee.png" mode="widthFix"></image>
						</view>
						<view style="width:100%;display: flex;">
							<view style="line-height: 50rpx;color: #808080;font-size: 28rpx;width: 22%;">
								<view class="te_center">线上下单</view>
								<view class="te_center">支付费用</view>
							</view>
							<view style="line-height: 50rpx;color: #808080;font-size: 28rpx;width: 26%;">
								<view class="te_center">精选到家</view>
								<view class="te_center">快速接单</view>
							</view>
							<!-- <view style="width: 4%;"></view> -->
							<view style="line-height: 50rpx;color: #808080;font-size: 28rpx;width: 26%;">
								<view class="te_center">联系商家</view>
								<view class="te_center">商家接单</view>
							</view>
							<view style="line-height: 50rpx;color: #808080;font-size: 28rpx;width: 25%;">
								<view class="te_center">线下服务</view>
								<view class="te_center">验收</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 服务内容结束 -->

		</view>
		<view style="height: 150rpx;"></view>
		<view style="width: 100%;margin: auto;background-color: white;	position: fixed;
		z-index: 99;
		
		bottom: 0;">
			<view class="foot">
				<view class="sales">
					<view style="font-size: 38rpx;margin-right: 12rpx;color: #F29423;">
						￥<text style="font-size:45rpx;">{{(details.unitPrice*1).toFixed(2)}}</text>
					</view>
					<view class="price">
						<view class="tgPrice">团购价</view>
						<view class="msPrice" style="color: #909399;">门市价
						<text style="font-size: 20rpx;color: #909399;">￥</text>
						<text style="font-size: 26rpx;color: #909399;">{{(details.showPrice*1).toFixed(2)}}</text>
			        </view>
					</view>
				</view>
				<view class="positin" style="width: 48%;">
					<view style="display: flex;width: 100%;">
						<view style="text-align: center; width: 30%;" @click="updateCandidate(details.packageBusinessId)">
							
							<image src="../../../../static/img/1_43.png" mode="" style="width: 50rpx;height: 50rpx;"  v-if="details.haveStar==0"></image>
							<image src="../../../../static/img/1-33.png" mode="" style="width: 50rpx;height: 50rpx;"  v-if="details.haveStar==1"></image>
							<view style="font-size: 26rpx;color: #707070;" v-if="details.haveStar==0">收藏</view>
							<view style="font-size: 26rpx;color: #707070;" v-if="details.haveStar==1">已收藏</view>
						</view>
					<view class="call"  @click="payOrder(details.name,details.unitPrice,details.showPrice)">
						立即下单
					</view>
					</view>
					
					
				</view>
			</view>
		</view>
	
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				advantage: ['平台担保', '过期退款'],
				packageBusinessId:'',
				details:'',
				imagesList:[],
				description:'',
				selectBom: 1,//滑动默认选中第一个
				userId:'',
				flag: false,
				formHeight: {
					server: 0,
					instruction: 0,
					evaluation: 0
				}, //记录滑动的位置
				
			}
		},
		onLoad(option) {
			// uni.showShareMenu();
			this.packageBusinessId = option.packageBusinessId
			this.gettcDetails();// 获取套餐详情
			var userInfo = JSON.parse(uni.getStorageSync('userinfo'));
			this.userId = userInfo.userId
		},
		methods: {
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
				
				}
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'common/insertShareLog'
				};
				let data = {};
				this.http.httpTokenRequest(opts, data).then(res => {
					//分享日志，不需要处理
				});
				return {
					title: this.details.name,
					path:'/pages/login/login?id='+this.userId+'&packageBusinessId='+this.packageBusinessId+"&jumpType="+6
					
				}
			},
			// 滑动到指定位置
			goSliding(top, selectBom) {
				this.selectBom = selectBom;
				uni.pageScrollTo({
					scrollTop: top,
					duration: 300
				});
			},
			// 点击放大
			clickPreview(index) {
				uni.previewImage({
					current: index,
					urls: this.imagesList,
					indicator: 'default',
					loop: true
				});
			},
			// 获取套餐详情
			gettcDetails(){
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'package-business/info',
				};
				let data = {
					packageBusinessId:_this.packageBusinessId
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == 200) {
						_this.details = res.data
						_this.imagesList = res.data.images.split(',')
						_this.description = res.data.description;
						_this.infoPage(); // 初始化页面
					}else{
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},
			// 初始化页面
			infoPage() {
				var that = this;	  
				setTimeout(()=>{
					const query1 = uni.createSelectorQuery().in(that);
					query1
						.select('#comment1')
						.boundingClientRect(data => {
							that.formHeight.server = data.top - 33 ;
						})
						.exec();
					const query2 = uni.createSelectorQuery().in(that);
					query2
						.select('#comment2')
						.boundingClientRect(data => {
							that.formHeight.instruction = data.top - 50 ;
						})
						.exec();
					const query3 = uni.createSelectorQuery().in(that);
					query3
						.select('#comment3')
						.boundingClientRect(data => {
							that.formHeight.evaluation = data.top - 33 ;
						})
						.exec();
				},1000);
				
			},
			showTag(){
					this.flag = !this.flag;
			},
			// 收藏状态 套餐传3 商家1
			updateCandidate(packageBusinessId){
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'favorite/change',
				};
				let data = {
					type:3,
					contentId:packageBusinessId
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == 200) {
						this.gettcDetails();
					}else{
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},
			payOrder(name,unitPrice,showPrice) {
				uni.navigateTo({
					url:'../../../order/payOrder?packageBusinessId='+this.packageBusinessId+'&name='+name+'&unitPrice='+unitPrice+'&showPrice='+showPrice
					
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding: 0 40rpx;
	}
	.te_center{
		text-align: center;
	}
	.shopname{
		font-size: 26rpx;
		color: #9393AA;
	}
	.positin{
		display: flex;align-items: center;
		padding-left: 20rpx;
		// padding-bottom: 40rpx;
	}
	.positin image{
		width: 25rpx;height: 25rpx;
	}
	.names{
		color: #272755;font-size: 34rpx;font-weight: bold;margin: 34rpx 0;
		width: 100%;text-align: center;
	}
	.images{
		display: flex;overflow: auto;width: 100%;white-space: nowrap;margin-top: 43rpx;
	}
	.images view{
		// width: 40%;
		display: inline-block;margin-right: 24rpx;
	}
	.images image{
		width: 176rpx;height: 176rpx;border-radius: 20rpx;
	}
	.star{
		display: flex;justify-content: space-between;margin-top: 32rpx;margin-bottom: 24rpx;
	}
	.star .positin view{
		color: #9393AA;font-size: 30rpx;margin-right: 16rpx;
	}
	.star .positin image{
		width: 16rpx;height: 28rpx;
	}
	.liucheng{
		display: flex;align-items: center;justify-content: space-between;margin-bottom: 46rpx;
	}
	.liucheng view{
		width: 176rpx;height: 90rpx;box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);border-radius: 10rpx;text-align: center;line-height:92rpx;
		font-size: 30rpx;color: #272755;font-weight: 400;
	}
	.liucheng image{
		width: 16rpx;height: 28rpx;
	}
	.success{
		display: flex;margin-top: 20rpx;
	}
	.one{
		width: 23%;
	}
	.two{
		width: 77%;
	}
	.details{
		color: #272755;font-size: 30rpx;text-align: center;margin: 20rpx 0;font-weight: bold;
	}
	.pircture{
		width: 92%;margin:0 auto ; 
		overflow: hidden;color: #9393AA;
		letter-spacing: 1rpx;
		margin-top: 20rpx;
	}
	.height_one{
		height: 600rpx;
		
	}
	.active{
	        height: auto;
	        overflow: visible;
	    }
	.look{
		display: flex;width: 100%;margin: 0 auto;margin-top: 34rpx;
	}
	.look view{
		text-align: center;
		margin: auto;
		width: 50%;
		color: #9393AA;font-size: 26rpx;margin-bottom: 20rpx;font-weight: 400;
	}
	.look image{
		width: 28rpx;height: 17rpx;margin: 10rpx 0 0 10rpx;
	}
	
	
	
	.foot {
		// position: fixed;
		// z-index: 99;
		// background-color: #FFFFFF;
		// bottom: 0;
		width: 94%;
		margin: auto;
		display: flex;
		align-items: center;
		// justify-content: space-around;
		// text-align: center;
		font-size: 26rpx;
		color: #707070;
		padding: 20rpx 0;
		// padding-left: 42rpx;
		// padding-right: 34rpx;
	}
	.sales{
		border-right: 1px solid #E4E4E4;width: 50%;display: flex;color: #F29423;align-items: center;height: 62rpx;
	}
	.price text{
		text-decoration: line-through;
	}
	.tgPrice{
		font-size: 20rpx;border: 2rpx solid #F29423;width: 66rpx;text-align: center;border-radius: 4rpx;
	}
	.msPrice{
		color: #E4E4E4;font-size: 24rpx;
	}

	.call {
		margin-left: 10%;
		width: 60%;
		height: 100rpx;
		background-color: #F29423;
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 100rpx;
		border-radius: 20rpx;
		text-align: center;
		// margin-left: 36rpx;
		float: right;
	}
	.boxs {
		text-align: center;
		width: 114rpx;
		height: 48rpx;
		display: inline-block;
		position: relative;
	}
	.getCodeView {
		display: inline-block !important;
		padding: 0 !important;
		width: 114rpx !important;
		margin-right: 0;
		height: 60rpx;
		line-height: 60rpx;
		padding-right: 0rpx;
		z-index: 11;
		opacity: 0;
		position: absolute;
		left: 0;
	}
</style>
